<template>
  <div>
    <van-nav-bar title="结算银行账户" fixed left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top">
      <van-form class="mg-25 mt-20" ref="subForm">
        <form-item itemName="账户详情">
          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="bankAccountTypeText"
            label="账户类型"
            placeholder="点击选择账户类型"
            @click="accountTypeShowPicker = true"
          />
          <van-popup v-model="accountTypeShowPicker" position="bottom">
            <van-picker
              item-height="45"
              visible-item-count="4"
              show-toolbar
              title="账户类型"
              :columns="bankAccountType"
              @confirm="accountTypeOnConfirm"
              @cancel="accountTypeShowPicker = false"
            />
          </van-popup>
          <van-field
            v-model="info.BankAccountName"
            name="开户名称"
            label="开户名称"
            placeholder="开户名称"
            :rules="[{ required: true, message: ' ' }]"
          />

          <van-field
            readonly
            right-icon="arrow"
            clickable
            name="picker"
            :value="info.BankName"
            label="开户银行"
            placeholder="点击选择开户银行"
            @click="openBankType"
          />
          <van-popup v-model="bankTypeShowPicker" position="bottom">
            <van-picker
              item-height="45"
              visible-item-count="4"
              show-toolbar
              title="开户银行"
              :columns="bankTypeList"
              @confirm="bankTypeOnConfirm"
              @cancel="bankTypeShowPicker = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            right-icon="arrow"
            name="area"
            :value="regionName"
            label="开户银行省市"
            placeholder="点击选择省市区"
            @click="showArea = true"
          />
          <van-popup v-model="showArea" position="bottom">
            <van-area
              item-height="45"
              visible-item-count="4"
              :area-list="areaList"
              @confirm="areaOnConfirm"
              @cancel="showArea = false"
              :columns-num="2"
            />
          </van-popup>
          <van-field v-model="info.BranchName" label="开户支行" placeholder="开户支行名称" />
          <van-field
            v-model="info.BankAccountNo"
            name="银行卡号"
            label="银行卡号"
            placeholder="银行卡号"
            :rules="[{ required: true, message: ' ' }]"
          />
        </form-item>
        <div class="btn-box pt-40 pb-60 flex-center">
          <van-button class="br-10 hollow-btn" type="info" @click="handleSubmit(0)">保存草稿</van-button>
          <van-button class="br-10 solid-btn" type="info" @click="handleSubmit(1)">保存并下一步</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import formItem from 'components/formItem'
import areaList from 'utils/area'
import { AddMerchantBankAccountData, GetMerchantApplyData, GetBankTypeList } from 'api/merchantPaper'

export default {
  data() {
    return {
      info: {
        AccountNo: '',
        BankAccountType: 0,
        BankAccountName: '',
        BankAccountNo: '',
        BankName: '',
        CityCode: '',
        BranchName: ''
      },
      regionName: '',
      bankAccountTypeText: '',
      bankAccountType: [
        { id: 0, text: '私人' },
        { id: 1, text: '对公' }
      ],
      bankTypeList: [],
      areaList: areaList,
      accountTypeShowPicker: false,
      bankTypeShowPicker: false,
      showArea: false,
      accountNo: '',
      done: false
    }
  },
  components: {
    formItem
  },
  created() {
    var accountNo = this.$route.query.accountNo
    if (accountNo) {
      this.accountNo = accountNo
      this.GetMerchantApplyData()
    } else {
      this.$toast({
        message: '保存信息前,需要先完成主体信息'
      })
    }
  },
  methods: {
    openBankType() {
      this.GetBankTypeList()
    },
    handleSubmit(val) {
      if (this.accountNo) {
        this.$refs.subForm.validate().then(() => {
          this.info.AccountNo = this.accountNo
          AddMerchantBankAccountData(this.info).then(res => {
            if (res) {
              this.$toast.success('操作成功')
              if (val === 1) {
                //下一步
                this.$router.push({
                  path: '/merchantPaper/admin',
                  query: { accountNo: this.accountNo }
                })
              } else {
                this.$router.replace({
                  path: '/merchantPaper/',
                  query: { accountNo: this.accountNo }
                })
              }
            }
          })
        })
      } else {
        this.$toast.fail('商户编号是空的')
      }
    },
    //获取信息
    GetMerchantApplyData() {
      GetMerchantApplyData({
        AccountNo: this.accountNo
      }).then(res => {
        if (res) {
          this.info = res.Data.BankAccount
          this.done = res.Data.InputMain
          this.bankAccountTypeText = this.bankAccountType[this.info.BankAccountType].text
          var cityCode = this.info.CityCode
          if (cityCode != null && cityCode != '' && cityCode.length == 6) {
            var cityId = parseInt(cityCode)
            var provinceId = cityCode.substr(0, 2) + '0000'
            this.regionName = this.areaList.province_list[provinceId] + '-' + this.areaList.city_list[cityId]
          }
        }
      })
    },
    //获取银行列表
    GetBankTypeList() {
      this.bankTypeList = []
      GetBankTypeList().then(res => {
        if (res.Data.length && res.Data.length > 0) {
          res.Data.forEach(item => {
            this.bankTypeList.push({ id: item.Key, text: item.Value })
          })
        }
        this.bankTypeShowPicker = true
      })
    },
    accountTypeOnConfirm(value) {
      this.bankAccountTypeText = value.text
      this.accountTypeShowPicker = false
    },
    bankTypeOnConfirm(value) {
      this.info.BankName = value.text
      this.bankTypeShowPicker = false
    },
    areaOnConfirm(value) {
      if (value) {
        this.regionName = value[0].name + '-' + value[1].name
        this.info.CityCode = value[1].code
      }
      this.showArea = false
    }
  }
}
</script>
<style lang="scss" scoped></style>
